<template>
  <container v-loading="isLoad">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="名称" required v-valid="modelData.valid.name">
        <el-input v-model="modelData.form.name"></el-input>
        <form-error name="error" :info="modelData.valid.name"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="modify" :loading="isSubmit">立即创建</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </container>
</template>

<script lang="ts">
import Vue from 'vue';
import * as module from '../modify.model';
export default Vue.proxyVue({
  module,
  init(initData){
    return {
      isSubmit:false,
      isLoad:true,
      modelData:initData
    };
  },
  props:{
    id:String,
    winId:String
  },
  mounted(){
    if(this.id){
      this.loadData();
    }else{
      this.isLoad=false;
    }
  },
  methods:{
    close(){
      this.$api.close(this.winId);
    },
    async modify(){
      this.isSubmit=true;
      const flag = await this.trigger.testModify();
      this.isSubmit =false;
      if(flag){
        this.$api.message(this.winId,this.id==null?'add':'modify',{});
        this.$api.notify("success","",`${this.id==null?'新增':"修改"}成功`);
        this.$api.close(this.winId);
      }
    },
    async loadData(){
      await this.trigger.fetch(this.id);
      this.isLoad=false;
    }
  }
})
</script>
